import Head from "next/head";

import { SessionProvider } from "next-auth/react";
import { AnimatePresence } from 'framer-motion'
import NProgress from "nprogress";
import '@/styles/main.scss'
import { AuthComp } from "@/components/layout";
import {
  PROJ_TITLE,
  REDIRECT_COVER,
  REDIRECT_DESC,
  REDIRECT_TITLE,
  REDIRECT_URL,
  REDIRECT_WX_COVER,
  REDIRECT_WX_URL
} from "@/config";
import Script from 'next/script'
import { useRouter } from 'next/router'
import * as gtag from '@/libs/gtag'
import { useEffect } from "react";
import { checkENV2, WECHAT } from "@/utils";
import process from "next/dist/build/webpack/loaders/resolve-url-loader/lib/postcss";

function handleExitComplete() {
  if (typeof window !== 'undefined') {
    window.scrollTo({top: 0})
  }
}

export default function App({Component, pageProps: {session, ...pageProps}}) {

  const router = useRouter();
  
  useEffect(() => {

    (async () => {
      
      // router events watch
      
      try {
        const style = {
          text: PROJ_TITLE,
        };
        // window.QYApp?.setNavHidden(false)
        // window.QYApp?.setNavTitle(PROJ_TITLE, style, "subcallback");
        // new VConsole()
      } catch (error) {}
      router.events.on("routeChangeStart", url => NProgress.start());
      router.events.on("routeChangeComplete", (url) => NProgress.done());
      router.events.on("routeChangeError", () => NProgress.done());

      const url = window.location.href.split(`#`)[0];
      await WECHAT.config(url);

      // google tag
      const handleRouteChange = (url) => gtag.pageview(url);
      router.events.on('routeChangeComplete', handleRouteChange)
      return () => router.events.off('routeChangeComplete', handleRouteChange);
    })()
  }, [router.events])

  return (
    <>
      <Head>
        <title>{PROJ_TITLE}</title>
        <meta name="description" content={REDIRECT_DESC} />
        <meta property="og:type" content="website" />
        <meta property="og:title" content={PROJ_TITLE} />
        <meta property="og:description" content={REDIRECT_DESC} />
        <meta property="og:image" content={REDIRECT_COVER} />
        <meta property="og:url" content={REDIRECT_URL} />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover" />
        <link rel="icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href={REDIRECT_COVER} />

        <script
          dangerouslySetInnerHTML={{
            __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());

              gtag('config', '${gtag.GA_TRACKING_ID}', {
                page_path: window.location.pathname,
              });
            `,
          }}
        />
      </Head>

      {/* <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
      /> */}

      {/* <img width={0} height={0} style={{float: `left`}} src={REDIRECT_COVER} alt="" /> */}

      <SessionProvider session={session} basePath={`${process.env.NEXT_PUBLIC_BASE_PATH}/api/auth`} >
        <AnimatePresence mode={`wait`} onExitComplete={handleExitComplete}>
          {
            Component.need2auth ?
              <AuthComp key={Component.pageName} pageName={Component.pageName}>
                <Component {...pageProps} />
              </AuthComp>
              :
              <Component {...pageProps} />
          }
        </AnimatePresence>
      </SessionProvider>
    </>
  )
}
